<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>码匠社区 - 问题</title>
    <title th:replace="head :: htmlHead"></title>
    <style>
        .questionMenu a {
            color: #999999;
        }
    </style>
</head>
<body>
<div th:insert="navigation :: headBar"></div>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-sm-12">
            <!--问题描述-->
            <div class="col-lg-12">
                <h3 th:text="${question.title}"></h3>
                <span style="font-size: 12px;color: #999999">作者：[[${question.name}]] ｜ 发布于：[[${#dates.format(question.gmtModify,'yyyy MMMM dd日 HH:mm')}]] ｜ 阅读数：[[${question.viewCount}]]</span>
                <hr>
                <div th:replace="markdown :: markdown"></div>
                <div id="question-markdown-view">
                    <textarea style="display:none;" th:text="${question.description}"></textarea>
                </div>
                <hr>
                <div class="questionMenu" style="display: inline-flex">
                    <span class="label label-info" style="margin-right: 10px" th:each="tag : ${question.tag.split(',')}">
                        <span class="glyphicon glyphicon-tag"></span>
                        <span th:text="${tag}"></span>
                    </span>
                    <a th:href="@{'/publish/'+${question.id}}"
                       th:if="${session.user != null && question.creator == session.user.id}"><span
                            class="glyphicon glyphicon-pencil"></span> 编辑</a>
                </div>
            </div>
            <!--评论模块-->
            <div class="col-lg-12">
                <hr>
                <h4>[[${question.commentCount}]] 个回复</h4>
                <hr th:if="${!commentList.isEmpty()}">
                <!--评论列表-->
                <input type="hidden" name="questionId" th:value="${question.id}">
                <div class="col-lg-12">
                    <div class="media" th:each="comment : ${commentList}" style="border-bottom: 1px solid lightgrey;padding-bottom: 5px;">
                        <div class="media-left">
                            <a href="#"><img style="width: 40px; height: 40px;" th:src="${comment.user.avatarUrl}"
                                             class="media-object img-rounded" alt="用户头像"></a>
                        </div>
                        <div class="media-body">
                            <span class="media-heading" style="font-weight: bolder">[[${comment.user.name}]]</span>
                            <p style="margin: 0;" th:text="${comment.content}"></p>
                            <div class="commentOperation">
                                <span class="glyphicon glyphicon-thumbs-up icon"></span>
                                <a role="button" data-toggle="collapse" th:href="'#collapseBody-'+${comment.id}" aria-expanded="false">
                                    <span class="glyphicon glyphicon-comment icon"></span>
                                </a>
                                <span class="pull-right" th:text="${#dates.format(comment.gmtModify,'yyyy-MM-dd')}"></span>
                                <!--弹出框-->
                                <div style="margin-top: 10px;" class="panel panel-default collapse" th:id="'collapseBody-' + ${comment.id}" th:data-id="${comment.id}">
                                    <!--添加子评论-->
                                    <div th:id="'subCommentInput-'+${comment.id}" class="panel-body">
                                        <div class="col-lg-12">
                                            <input th:id="'createComment-' + ${comment.id}" type="text" class="form-control" placeholder="评论一下...">
                                            <button type="button" style="margin-top: 10px" class="btn btn-default pull-right" th:onclick="'commentComment('+${comment.id}+')'">评论</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="col-lg-12">
                <!--回复模块-->
                <div class="col-lg-12">
                    <div class="media" style="display: flex;align-items: center" th:if="${session.user != null}">
                        <div class="media-left">
                            <a href="#"><img style="width: 40px; height: 40px;" th:src="${session.user.avatarUrl}"
                                             class="media-object img-rounded" alt="用户头像"></a>
                        </div>
                        <div class="media-body">
                            <span class="media-heading">[[${session.user.name}]]</span>
                        </div>
                    </div>
                </div>
                <label for="comment" class="col-lg-12" style="margin-top: 15px">
                    <textarea id="comment" class="form-control" rows="6"></textarea>
                    <button type="button" class="btn btn-success pull-right" style="margin-top: 15px" onclick="commentQuestion()">回复</button>
                </label>
            </div>
        </div>
        <!--右侧相关-->
        <div class="col-lg-3 col-sm-12">
            <div class="col-lg-12">
                <h5>发起人</h5>
                <div class="media">
                    <div class="media-left">
                        <a href="#"><img style="width: 40px; height: 40px;" th:src="${question.avatarUrl}"
                                         class="media-object img-circle" alt="用户头像"></a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">[[${question.name}]]</h4>
                        <span style="font-size: 12px;color: #999999" th:text="${question.bio}"></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <h4 style="margin: 25px 0 15px 0">相关问题</h4>
                <li th:each="relativeQuestion : ${relativeQuestionList}" style="list-style: none;margin-bottom: 10px">
                    <a th:href="@{'/question/' + ${relativeQuestion.id}}" th:text="${relativeQuestion.title}"></a>
                </li>
            </div>
        </div>
    </div>
    <!--子评论模版-->
    <div id="sumCommentModel" class="panel-body none" style="border-bottom: 1px solid lightgrey;">
        <div class="media">
            <div class="media-left">
                <a href="#"><img style="width: 40px; height: 40px;" src=""
                                 class="media-object img-rounded" alt="用户头像"></a>
            </div>
            <div class="media-body">
                <span class="media-heading" style="font-weight: bolder"></span>
                <p style="margin: 0;"></p>
            </div>
        </div>
    </div>
</div>
</body>
</html>